<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ROS2 机器人虚拟控制手柄</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <header class="header">
            <h1>🤖 ROS2 机器人控制中心</h1>
            <div class="connection-status">
                <span id="status-text">未连接</span>
                <div class="status-indicator" id="status-indicator"></div>
            </div>
        </header>

        <div class="control-panel">
            <!-- 连接设置区域 -->
            <div class="connection-panel">
                <div class="input-group">
                    <label for="robot-ip">机器人IP:</label>
                    <input type="text" id="robot-ip" value="172.10.7.64" placeholder="输入机器人IP">
                </div>
                <div class="input-group">
                    <label for="robot-port">端口:</label>
                    <input type="text" id="robot-port" value="9090" placeholder="输入端口">
                </div>
                <button id="connect-btn" class="connect-btn">连接</button>
                <button id="disconnect-btn" class="disconnect-btn" disabled>断开连接</button>
            </div>

            <!-- 速度显示区域 -->
            <div class="speed-display">
                <div class="speed-item">
                    <span class="speed-label">线速度:</span>
                    <span id="linear-speed" class="speed-value">0.00</span>
                    <span class="speed-unit">m/s</span>
                </div>
                <div class="speed-item">
                    <span class="speed-label">角速度:</span>
                    <span id="angular-speed" class="speed-value">0.00</span>
                    <span class="speed-unit">rad/s</span>
                </div>
            </div>
        </div>

        <!-- 虚拟摇杆区域 -->
        <div class="joystick-area">
            <!-- 左侧摇杆 (移动控制) -->
            <div class="joystick-container left-joystick">
                <div class="joystick-label">移动控制</div>
                <div class="joystick" id="movement-joystick">
                    <div class="joystick-base">
                        <div class="joystick-handle" id="movement-handle"></div>
                    </div>
                </div>
                <div class="joystick-info">
                    <div class="coord-display">
                        <span>X: <span id="move-x">0</span></span>
                        <span>Y: <span id="move-y">0</span></span>
                    </div>
                </div>
            </div>

            <!-- 右侧摇杆 (旋转控制) -->
            <div class="joystick-container right-joystick">
                <div class="joystick-label">旋转控制</div>
                <div class="joystick" id="rotation-joystick">
                    <div class="joystick-base">
                        <div class="joystick-handle" id="rotation-handle"></div>
                    </div>
                </div>
                <div class="joystick-info">
                    <div class="coord-display">
                        <span>旋转: <span id="rotation-value">0</span></span>
                    </div>
                </div>
            </div>
        </div>

        <!-- 控制按钮区域 -->
        <div class="button-area">
            <button class="control-btn emergency-stop" id="emergency-stop">
                <span class="btn-icon">⛔</span>
                <span class="btn-text">急停</span>
            </button>
            <button class="control-btn speed-boost" id="speed-boost">
                <span class="btn-icon">⚡</span>
                <span class="btn-text">加速</span>
            </button>
            <button class="control-btn reset-position" id="reset-position">
                <span class="btn-icon">🔄</span>
                <span class="btn-text">重置</span>
            </button>
        </div>

        <!-- 日志区域 -->
        <div class="log-area">
            <div class="log-header">
                <span>操作日志</span>
                <button id="clear-log" class="clear-log-btn">清空</button>
            </div>
            <div class="log-content" id="log-content">
                <div class="log-entry">系统已启动，请连接机器人...</div>
            </div>
        </div>
    </div>

    <!-- 本地引入roslibjs库 -->
    <script src="roslib.min.js"></script>
    <script src="controller.js"></script>
</body>
</html> 